<h1>Audio file format convert base on ffmpeg</h1>

<input id="fileupload" type="file" name="fileupload" />

<label for="format">Choose a format:</label>
<select name="format" id="format">
    <option value="mp3">mp3</option>
    <option value="wav">wav</option>
    <option value="mp4">mp4</option>
    <option value="mkv">mkv</option>
    <option value="pdf">pdf</option>
</select>

<br/>
<div>
    <h2>Common</h2>
From: <input name="beginTime" id="beginTime" placeholder="00:00:00"/>
End: <input name="endTime" id="endTime" placeholder="00:00:00"/>
<br/>
    Metadata: <textarea id="metadata" placeholder="track=1;publisher=publisher;comment=comment"></textarea>
<div/>
<br/>

<div>
    <h2>Audio</h2>
Bitrate: <input id="audioBitrate" placeholder="128"/>
</div>

<div>
    <h2>Video</h2>
Width: <input id="width" value="0"/>
Height: <input id="height" value="0"/>
</div>

<br/>
<button id="upload-button" onclick="uploadFile()"> Convert </button>

<div id="info"></div>
<div id="download">
    <span id="status"></span>
</div>

<script>
    async function uploadFile() {
        let format = document.getElementById("format").value;
        let beginTime = document.getElementById("beginTime").value;
        let endTime = document.getElementById("endTime").value;
        let width = document.getElementById("width").value;
        let height = document.getElementById("height").value;
        let audioBitrate = document.getElementById("audioBitrate").value;
        let metadata = document.getElementById("metadata").value;
        let formData = new FormData();

        formData.append("file", fileupload.files[0]);
        formData.append("format", format)
        formData.append("beginTime", beginTime)
        formData.append("endTime", endTime)
        formData.append("width", width)
        formData.append("height", height)
        formData.append("audioBitrate", audioBitrate)
        formData.append("metadata", metadata)
        const resp = await fetch('/upload', {
            method: "POST",
            body: formData
        });
        const text = await resp.text();
        queryTask(text);
    }

    function queryTask(id) {
        fetch('/queryTask?id='+id)
            .then(res => res.json())
            .then(out => {
                if(out.Output && out.Output!=="") {
                    document.getElementById('status').innerText = 'finished'

                    let but = document.createElement('button')
                    but.innerText = 'Download ' + out.TargetFile
                    but.onclick = function () {
                        window.location = '/download?file=' + out.TargetFile
                    }
                    document.getElementById('download').append(but)
                } else if (out.ErrOutput && out.ErrOutput !== "") {
                    document.getElementById('status').innerText = out.ErrOutput
                } else {
                    document.getElementById('status').innerText = 'converting'
                    window.setTimeout(queryTask, 2000, id)
                }
                document.getElementById('info').innerText = out.Info
            })
    }
</script>
